<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>导航案例</title>
	<style type="text/css">
		/*代码初始化*/
		/*去除默认内外边距*/
		*{
			margin: 0;
			padding: 0;
		}
		/*去除a链接下划线*/
		a{
			text-decoration: none;
		}
		/*去除列表标记*/
		li{
			list-style-type: none;
			/*list-style: none;*/
		}
		/*代码主体*/
		.nav{
			width: 1188px;
			height: 40px;
			background-color: rgba(0,0,0,.3);
			/*居中*/
			margin: 0 auto;
		}
		.nav ul{
			width: 100%;
			height: 40px;
		}
		.nav ul li{
			float: left;
			width: 20%;
			/*水平居中*/
			text-align: center;
			/*垂直居中*/
			line-height: 40px;
		}
		/*导航选项字体颜色*/
		.nav ul li a{
			color: #000;/*a链接字体颜色不可以继承*/
			/*转换为块级元素进行宽高设置*/
			display: block;
			width: 100%;
			height: 100%;
		}
		/*鼠标悬停变色*/
		.nav ul li:hover{
			background-color: rgba(0,0,0,.6);
		}
		.nav ul li:hover a{/*a链接字体颜色不可以继承*/
			color: white;
		}
	</style>
</head>
<body>
	<!-- 导航 -->
	<div class="nav">
		<ul>
			<li>
				<a href="#">高考作文</a>
			</li>
			<li>
				<a href="#">高考英语</a>
			</li>
			<li>
				<a href="#">高考作文</a>
			</li>
			<li>
				<a href="#">高考英语</a>
			</li>
			<li>
				<a href="#">高考作文</a>
			</li>
		</ul>
	</div>
</body>
</html>